<template>
  <div>
    <div class="container pb-5">
      <div class="row p-4 mt-5 color-333">
        <div class="col-md-12 top-box text-center mb-5">
          <div class="fs-18">{{model.title}}</div>
          <div class="fs-30">{{model.english}}</div>
          <div class="line-box d-flex j-center">
            <span></span>
            <span></span>
          </div>
        </div>
      </div>
      <div class="row bg-f7 p-5">
        <div
          class="fs-20 col-md-6 pl-5 pb-4 d-flex a-center"
          v-for="(item, i) in model.type"
          :key="i"
        >
          <img
            :src="i % 2 == 0 ? require('../assets/images/zhuanye1.png') : require('../assets/images/zhuanye2.png')"
            class="img-responsive mr-3"
            alt
          />
          <router-link :to="{name: 'MajorType', query: {title: item}}" tag="span" class="type">{{item}}</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: null,
      majorList: [
        {
          title: "新媒体",
          english: "NEW MEDIA",
          type: ["新媒体应用技术", "新媒体表演技术", "新媒体传播", "新媒体营销"]
        },
        {
          title: "新文旅",
          english: "NEW CULTURE",
          type: ["国际高端旅游管理", "国际连锁酒店管理", "高级会展策划与服务"]
        }
      ],
      model: {}
    };
  },
  created() {
    this.model = this.majorList[this.$route.query.id];
  }
};
</script>

<style lang="scss">
.type {
  cursor: pointer;
}
</style>